<template>
	<view class="article-box" @click="goDetails" v-bind:id="article.id">
		<view class="article-content">
			<h4>{{article.title || article.name}}</h4>
			<view class="article-data">
				<!-- 因为新闻页与活动页的一些参数名称不一致 所以做一下判断 -->
				<p v-if="article.readNum">👀{{article.readNum}}</p>
				<p v-if="article.likeNum">👍️{{article.likeNum}}</p>
				<p v-if="article.commentNum">💬{{article.commentNum}}</p>
				<p v-if="article.signupNum">🎫{{article.signupNum}}</p>
			</view>
		</view>
		<img :src="getImg(imgUrl)">
	</view>
</template>

<script>
	import {
		getImg
	} from "../../utils/request.js"
	export default {
		props: ["article", "goDetailsUrl"],
		name: "ArticleList",
		data() {
			return {
				// 有两个名称 看谁存在就用哪个
				imgUrl: this.article.cover || this.article.imgUrl,
				getImg: getImg
			}
		},
		methods: {
			// 跳转到对应的详情页
			goDetails(e) {
				uni.navigateTo({
					url: this.goDetailsUrl + e.currentTarget.id
				})
			}
		}
	}
</script>

<style scoped>
	.article-box {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		background-color: #ecf0f1;
	}

	.article-box>img {
		width: 150px;
		height: 100px;
	}

	.article-content {
		display: flex;
		flex: 1;
		min-width: 0;
		flex-direction: column;
		justify-content: space-between;
	}

	.article-data {
		display: flex;
		flex-direction: row-reverse;

	}

	.article-data>h4 {
		text-align: left;
	}

	.article-data>p {
		font-size: .75rem;
		color: #34495e;
	}

	.article-data>p+p {
		margin-right: .5rem;
	}
</style>
